<template>
    <div class="home-container">
        <!--  左边的轮播图、及文章列表  -->
        <main>
            <!--   轮播图：一级推荐   -->
            <!-- <FirstRecommend
                :list="level1List"
                @toArticleDetailHandle="toArticleDetailHandle"
            /> -->
            <!--   文章列表   -->
            <Blogs
                :blogList="blogList"
                :total="total"
                @toBlogDetailHandle="toBlogDetailHandle"
                @loadMoreHandle="loadMoreHandle"
            />
        </main>
    </div>
</template>

<script>

import Blogs from "@/components/Blogs/Blogs";

import {getNewBlog} from '@/api/blog'

import router from '@/router/index'


export default {
    name: "Home",
    props: {},
    components: {
        Blogs
    },
    data() {
        return {
            blogList: [], // 文章列表
            total: 0, // 文章列表总条数
            searchParam: {
                pageNum: 1, // 当前页
                pageSize: 10, // 列表总条数
            }
        }
    },
    methods: {
        // 查询博客列表
        getBlogList() {
            getNewBlog(this.searchParam).then(response => {
                // 数据追加
                this.blogList = [...this.blogList, ...response.rows]
                this.total = response.total;
            });
        },
        // 跳转到博客详情页面
        toBlogDetailHandle(blogId) {
            router.push(`/blogDetail/${blogId}`)
        },
        // 点击加载更多
        loadMoreHandle() {
            this.searchParam.pageNum++
            this.getBlogList()
        },

    },
    computed: {},
    watch: {},
    mounted() {

        // 获取博客列表
        this.getBlogList()
        
    }
}
</script>

<style scoped lang="scss">
@import "Home";
</style>
